---
section: Sizing
title: Height
slug: /docs/height/
order: 4
---

# Height

Utilities for setting the height of an element.

<carbon-ad />

| React props | CSS Properties    |
| ----------- | ----------------- |
| `h={size}`  | `height: {size};` |

## Auto

Use `h="auto"` to let the browser calculate and select the height for the element. You can use it to unset a specific height:

```jsx
<x.div h={{ xs: 24, md: 'auto' }} />
```

## Screen Height

Use `h="100vh"` to make an element span the entire height of the viewport.

```jsx
<x.div h="100vh" w={12} />
```

## Scaled Height

All values specified in the `sizes` theme section are automatically applied. Note there is a little difference for scales between `0` and `1` due to conflicting with fluid range. You have to add a suffix `s` to target values from theme, like `0.5` becomes `0.5s` and `1` becomes `1s`.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div
      display="flex"
      justifyContent="space-around"
      alignItems="flex-end"
      mx="auto"
    >
      {['1s', 8, 12, 16, 24].map((v) => (
        <x.div
          key={v}
          spaceY={4}
          display="flex"
          flexDirection="column"
          alignItems="center"
        >
          <x.div
            h={v}
            w={8}
            borderRadius="md"
            bg="light-blue-500"
            color="white"
            fontSize="2xl"
            fontWeight="extrabold"
          />
          <x.p fontSize="sm" color="light-blue-600" textAlign="center">
            h={v}
          </x.p>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div h="1s" />
    <x.div h={8} />
    <x.div h={12} />
    <x.div h={16} />
    <x.div h={24} />
  </x.div>
</>
```

## Fixed Height

Any valid value is accepted in height, numbers are converted to `px`, other units have to be specified.

```jsx preview color=emerald
<>
  <template preview>
    <x.div
      display="flex"
      justifyContent="space-around"
      alignItems="flex-end"
      mx="auto"
    >
      {[123, '12px', '4rem', '3ex'].map((v) => (
        <x.div
          key={v}
          spaceY={4}
          display="flex"
          flexDirection="column"
          alignItems="center"
        >
          <x.div
            w={8}
            h={v}
            borderRadius="md"
            bg="emerald-500"
            color="white"
            fontSize="2xl"
            fontWeight="extrabold"
          />
          <x.p fontSize="sm" color="emerald-600" textAlign="center">
            h={v}
          </x.p>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div>
    <x.div h={123} />
    <x.div h="12px" />
    <x.div h="4rem" />
    <x.div h="3ex" />
  </x.div>
</>
```

## Fluid Height

Values from `0` to `1` are converted into percentages. As a fraction or a number, both are an expression. Of course specifying `[value]%` is also possible.

```jsx preview color=rose
<>
  <template preview>
    <x.div
      spaceX={6}
      display="flex"
      justifyContent="space-around"
      alignItems="flex-end"
      mx="auto"
    >
      {[
        [
          ['1/2', 1 / 2],
          ['1/2', 1 / 2],
        ],
        [
          ['2/5', 2 / 5],
          ['3/5', 3 / 5],
        ],
        [
          ['0.2', 0.2],
          ['0.8', 0.8],
        ],
        [
          ['calc(50% - 40px)', 'calc(50% - 40px)'],
          ['calc(50% + 40px)', 'calc(50% + 40px)'],
        ],
      ].map((v, i) => (
        <x.div
          key={i}
          borderRadius="md"
          overflow="hidden"
          color="white"
          fontFamily="mono"
          h={48}
        >
          <x.div h={v[0][1]} px={2} py={4} bg="rose-400" textAlign="center">
            h={v[0][0]}
          </x.div>
          <x.div h={v[1][1]} px={2} py={4} bg="rose-500" textAlign="center">
            h={v[1][0]}
          </x.div>
        </x.div>
      ))}
    </x.div>
  </template>
  <x.div display="flex" h={48}>
    <x.div h={1 / 2}>h=1/2</x.div>
    <x.div h={1 / 2}>h=1/2</x.div>
  </x.div>
  <x.div display="flex" h={48}>
    <x.div h={2 / 5}>h=2/5</x.div>
    <x.div h={3 / 5}>h=3/5</x.div>
  </x.div>
  <x.div display="flex" h={48}>
    <x.div h={0.2}>h=0.2</x.div>
    <x.div h={0.8}>h=0.8</x.div>
  </x.div>
  <x.div display="flex" h={48}>
    <x.div h="calc(50% - 40px)">h=calc(50% - 40px)</x.div>
    <x.div h="calc(50% + 40px)">h=calc(50% + 40px)</x.div>
  </x.div>
</>
```

## Responsive

To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property `h={{ md: 1 }}` to an element would apply the `w={1}` utility at medium screen sizes and above.

```jsx
<x.div h={{ xs: 1 / 2, md: 1 }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

### Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the `theme.sizes` section of your theme.

```diffjs
  // theme.js
  export const theme = {
    sizes: {
+     sm: '8px',
+     md: '16px',
+     lg: '24px',
+     xl: '48px',
    },
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme/).
